<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>The 1140px, 16 Column CSS Grid System</title><!-- The 1140px Grid -->
    <link rel="stylesheet" href="css/1140.css" type="text/css" media="screen"/>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"/>
    <![endif]-->
    <!-- Type and image presets - NOT ESSENTIAL -->
    <link rel="stylesheet" href="css/typeimg.css" type="text/css" media="screen"/>
    <!-- Make minor type adjustments for 1024 monitors -->
    <link rel="stylesheet" href="css/smallerscreen.css" media="only screen and (max-width: 1023px)"/>
    <!-- Resets grid for mobile -->
    <link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)"/>
    <!-- Put your layout here -->
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen"/>
    <style type="text/css">
        p {
            text-align: justify;
        }

        .row {
            margin-bottom: 15px;
        }

        .examplecolumn {
            background: #1da251;
            height: 40px;
        }

        #header {
            background: red;
            height: 60px;
        }

        #footer {
            height: 60px;
            border-top: 1px solid black;
        }
    </style>
</head>

<body>
<div class="container examplecontainer">
    <div class="row">
        <div id="header" class="sixteencol last">

        </div>
    </div>
    <wicket:extend>
    <div class="row">
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol examplecolumn"></div>
        <div class="onecol last examplecolumn"></div>
    </div>
    <div class="row">
        <div class="tencol">
            <h2>Example of Content on 10 Columns</h2>

            <p>This is an example of content on 10 columns. Resize the browser window to see the grid's fluid
                capabilities.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>

            <p>Aenean hendrerit faucibus ante quis adipiscing. Quisque sed tortor elit. Sed tempus elementum aliquam.
                Praesent commodo sem at ligula sodales et mattis dui pulvinar. Curabitur eget metus leo, non iaculis
                sem. Cras auctor mattis nisl, viverra sodales tellus fermentum a. Mauris laoreet nulla et dui gravida ac
                pulvinar velit accumsan. Nulla ullamcorper commodo dignissim. Curabitur posuere molestie neque, at
                tempor turpis aliquam ac. Nulla facilisi.</p>
        </div>
        <div class="sixcol last">
            <h2>Content on 6 Columns</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>
        </div>
    </div>
    <div class="row">
        <div class="fourcol">
            <h2>Content on 4 Columns</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>
        </div>
        <div class="fourcol">
            <h2>Content on 4 Columns</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>
        </div>
        <div class="fourcol">
            <h2>Content on 4 Columns</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>
        </div>
        <div class="fourcol last">
            <h2>Content on 4 Columns</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel dui non nulla porta cursus. Quisque
                eget tincidunt neque. Sed accumsan ultricies nibh, in posuere risus consequat quis. Nulla a ipsum augue.
                Morbi eget aliquam ligula. Sed sed metus ligula. Maecenas et placerat lectus. Phasellus pellentesque
                varius venenatis. Quisque pharetra mollis tellus, vitae varius nunc porttitor eget. Nulla facilisi.
                Donec pulvinar, est eget fringilla tincidunt, arcu ipsum iaculis nibh, euismod blandit magna massa in
                purus. Etiam vehicula lobortis vestibulum.</p>
        </div>
    </div>
    </wicket:extend>
    <div class="row">
        <div id="footer" class="sixteencol last">
            [ Footer content here ]
        </div>
    </div>
</div>
</body>
</html>



